<!DOCTYPE HTML>
<html>
  <head>
    <title>监控系统 Home :: Logistic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="监控系统 Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
    Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="/static/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="/static/css/style.css" rel='stylesheet' type='text/css' />
    <link href="/static/css/font-awesome.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"> </script>
    <!-- Mainly scripts -->
    <script src="/static/js/jquery.metisMenu.js"></script>
    <script src="/static/js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <link href="/static/css/custom.css" rel="stylesheet">
    <script src="/static/js/custom.js"></script>
    <script src="/static/js/screenfull.js"></script>
    <script>
      $(function () {
        $('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

        if (!screenfull.enabled) {
          return false;
        }
        $('#toggle').click(function () {
          screenfull.toggle($('#container')[0]);
        });
      });
    </script>

    <!----->

    <!--pie-chart--->
    <script src="/static/js/pie-chart.js" type="text/javascript"></script>
    <script type="text/javascript">

      $(function () {
        $('#demo-pie-1').pieChart({
          barColor: '#ed1c1a',
          trackColor: '#eee',
          {#  barColor: '#31DE68',#}
          {#trackColor: '#31DE68',#}
          lineCap: 'round',
          lineWidth: 8,
          onStep: function (from, to, percent) {
            $(this.element).find('.pie-value').text(Math.round(percent)+ '%');
          }
        });
        $('#pie-h1').css('color','#ed1c1a');

        $('#demo-pie-2').pieChart({
          barColor: '#fbb03b',
          trackColor: '#eee',
          lineCap: 'butt',
          lineWidth: 8,
          onStep: function (from, to, percent) {
            $(this.element).find('.pie-value').text(Math.round(percent) + '%');
          }
        });
        $('#pie-h2').css('color','#fbb03b');

        $('#demo-pie-3').pieChart({
          barColor: '#ed7a5f',
          trackColor: '#eee',
          lineCap: 'square',
          lineWidth: 8,
          onStep: function (from, to, percent) {
            $(this.element).find('.pie-value').text(Math.round(percent) + '%');
          }
        });
        $('#pie-h3').css('color','#ed7a5f');
         $('#demo-pie-4').pieChart({
          barColor: '#2ded27',
          trackColor: '#eee',
          lineCap: 'square',
          lineWidth: 8,
          onStep: function (from, to, percent) {
            $(this.element).find('.pie-value').text(Math.round(percent) + '%');
          }
        });
         $('#pie-h4').css('color','#2ded27');
      });

    </script>
    <!--skycons-icons-->
    <script src="/static/js/skycons.js"></script>
    <!--//skycons-icons-->
  </head>
  <body>
  <div id="point1"></div>
    <div id="wrapper">

      <!----->
      <div class="navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <h1> <a class="navbar-brand" href="consumers.html">监控系统</a></h1>
        </div>
        <div class=" border-bottom ">
          <div class="full-left">

            <form class=" navbar-left-right">
              <input type="text"  value="Search..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';}">
              <input type="submit" value="" class="fa fa-search">
            </form>
            <div class="clearfix"> </div>
          </div>


          <!-- Brand and toggle get grouped for better mobile display -->
<em  style="text-align: center;position:absolute;left: 50%;top:15px;color:#333"> 商超编号：
    <em id="superId" >{{superId}}</em>
    <em id="hardid1" style="display: none">{{ hardIdList.0 }}</em>
    <em id="hardid2" style="display: none">{{ hardIdList.1 }}</em>
    <em id="hardid3" style="display: none">{{ hardIdList.2 }}</em>
    <em id="hardid4" style="display: none">{{ hardIdList.3 }}</em>
</em>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="drop-men" >
            <ul class=" nav_1">

              <li class="dropdown">
                <a href="signin.html" class="  dropdown-toggle" ><span class=" name-caret">商超人员</span><img src="/static/images/supermaket.png"></a>
              </li>

            </ul>
          </div><!-- /.navbar-collapse -->
          <div class="clearfix">

          </div>

          <div class="navbar-default sidebar " role="navigation" >
            <div class="sidebar-nav navbar-collapse">
              <ul class="nav" id="side-menu">

                <li>
                  <a href="#point1" class=" hvr-bounce-to-right"><i class="fa fa-dashboard nav_icon "></i><span class="nav-label">监控展示</span> </a>
                </li>


                <li>
                  <a href="#point2" class=" hvr-bounce-to-right"><i class="fa fa-tasks nav_icon"></i> <span class="nav-label">详细信息</span> </a>
                </li>

                <li>
                  <a href="#point3" class=" hvr-bounce-to-right"><i class="fa fa-send-o nav_icon"></i> <span class="nav-label">投诉建议</span> </a>
                </li>
                  
                <li>
                  <a href="#point4" class=" hvr-bounce-to-right"><i class="fa fa-hand-grab-o nav_icon"></i> <span class="nav-label">投诉处理</span> </a>
                </li>

              </ul>
            </div>
          </div>
      </div>
      <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="content-main">

          <!--banner-->	
          <div class="banner">

            <h2>
              <a href="#point1">首页</a>
              <i class="fa fa-angle-right"></i>
              <span>监控展示</span>
            </h2>
          </div>
          <!--//banner-->
            <div class="content-top">
                <div class="col-md-12 ">
                    <div class="col-md-3 top-content1">
                        <h5 id="pie-h1"><strong>待退产品</strong></h5>
                          <label>{{ proTotal.waitReturn }}件</label>
                        <div id="demo-pie-1" class="pie-title-center" data-percent="{{ proTotal.waitReturnCount }}"> <span class="pie-value"></span> </div>
                      <div class="clearfix"> </div>
                      </div>
                      <div class="col-md-3 top-content1">
                          <h5 id="pie-h2"><strong >急需下架产品</strong></h5>
                          <label>{{ proTotal.downDisplay }}件</label>
                        <div id="demo-pie-2" class="pie-title-center" data-percent="{{ proTotal.downDisplayCount }}"> <span class="pie-value"></span> </div>
                      <div class="clearfix"> </div>
                      </div>
                    <div class="col-md-3 top-content1">
                          <h5 id="pie-h3"><strong>预警产品</strong></h5>
                          <label>{{ proTotal.proWaring }}件</label>
                        <div id="demo-pie-3" class="pie-title-center" data-percent="{{ proTotal.proWaringCount }}"> <span class="pie-value"></span> </div>
                      <div class="clearfix"> </div>
                      </div>
                    <div class="col-md-3 top-content1">
                          <h5 id="pie-h4"><strong>优良产品</strong></h5>
                          <label>{{ proTotal.proWell }}件</label>
                        <div id="demo-pie-4" class="pie-title-center" data-percent="{{ proTotal.proWellCount }}"> <span class="pie-value"></span> </div>
                      <div class="clearfix"> </div>
                      </div>
                <div class="clearfix"> </div>

                      </div>
                </div>

          <!--content-->
          <div class="content-top">
              {# graph 1 start #}
            <div class="col-md-6 ">
              <div class="content-graph">
                  <div class="content-color-title">
                      <div class="content-ch">
                        <p><i></i>货柜编号:</p>
                        <span>001</span>
                        <div class="clearfix"> </div>
                        </div>
                          <div class="content-ch1">
                              <p><i></i>传感器编号:</p>
                              <span> {{ hardIdList.0 }}</span>
                            <div class="clearfix"> </div>
                          </div>
                  </div>
                <div class="content-color">
                  <div class="content-ch">
                      <p><i></i>温度</p>
                      <span id="avgT1"></span>
                    <div class="clearfix"> </div>
                  </div>
                  <div class="content-ch1">
                      <p><i></i>湿度</p>
                      <span id="avgH1"> </span>
                    <div class="clearfix"> </div>
                  </div>
                </div>
                <!--graph-->
                <link rel="stylesheet" href="/static/css/graph.css">
                <!--//graph-->
                <script src="/static/js/jquery.flot.js"></script>
                <script type="text/javascript">
                  var tempData1 = [];
                  var humData1 = [];
                  var avgtempData1 = 0.0;
                  var avghumData1 = 0.0;
                  function poltPint1() {

                      $.ajax({
                           'url':'/ajax_get_temp_hum',
                           'type':'post',
                           'dataType':'json',
                           'data':{'hardId':$('#hardid1').html()}
                       }).success(function (data) {
                            tempData1 = data.tempData;
                            humData1 = data.humData;
                            avgtempData1 = data.avgtempData;
                            avghumData1 = data.avghumData;
                        {#alert(tempData);#}
                        {#alert(humData);#}
                      });
                      $('#avgT1').html(avgtempData1);
                      $('#avgH1').html(avghumData1);
                      var graphData = [{
                       data: tempData1,
                       color: '#999999'
                    }, {
                        data: humData1,
                        color: '#d0cb2e',
                      points: { radius: 2, fillColor: '#7f8c8d' }
                    }
                    ];
                    $.plot($('#graph-lines-1'), graphData, {
                      series: {
                        points: {
                          show: true,
                          radius: 2
                        },
                        lines: {
                          show: true
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000#}
                          tickSize:10
                      }
                    });

                    // Bars Graph ##############################################
                    $.plot($('#graph-bars-1'), graphData, {
                      series: {
                        bars: {
                          show: true,
                          barWidth: .9,
                          align: 'center'
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000  TODO#}
                          tickSize:10
                      }
                    });

                    // Graph Toggle ############################################
                    $('#graph-bars-1').hide();

                    $('#lines').on('click', function (e) {
                      $('#bars').removeClass('active');
                      $('#graph-bars-1').fadeOut();
                      $(this).addClass('active');
                      $('#graph-lines-1').fadeIn();
                      e.preventDefault();
                    });

                    $('#bars').on('click', function (e) {
                      $('#lines').removeClass('active');
                      $('#graph-lines-1').fadeOut();
                      $(this).addClass('active');
                      $('#graph-bars-1').fadeIn().removeClass('hidden');
                      e.preventDefault();
                    });

                    // Tooltip #################################################
                    function showTooltip(x, y, contents) {
                      $('<div id="tooltip">' + contents + '</div>').css({
                        top: y - 16,
                        left: x + 20
                      }).appendTo('body').fadeIn();
                    }

                    var previousPoint = null;

                    $('#graph-lines-1, #graph-bars-1').bind('plothover', function (event, pos, item) {
                      if (item) {
                        if (previousPoint != item.dataIndex) {
                          previousPoint = item.dataIndex;
                          $('#tooltip').remove();
                          var x = item.datapoint[0],
                            y = item.datapoint[1];
                          showTooltip(item.pageX, item.pageY, y );
                        }
                      } else {
                        $('#tooltip').remove();
                        previousPoint = null;
                      }
                    });

                  }
                  $(document).ready(function () {
                      setInterval(poltPint1,2000);
                  });
                </script>
                <div class="graph-container">

                  <div id="graph-lines-1"> </div>
                  <div id="graph-bars-1"> </div>
                </div>

              </div>
            </div>
            {# graph 1 end #}
              {# graph 2start #}
            <div class="col-md-6 content-top-2">
              <!---start-chart---->
              <!----->
              <div class="content-graph">
                  <div class="content-color-title">
                      <div class="content-ch">
                        <p><i></i>货柜编号:</p>
                        <span>002</span>
                        <div class="clearfix"> </div>
                        </div>
                          <div class="content-ch1">
                              <p><i></i>传感器编号:</p>
                              <span > {{ hardIdList.1 }}</span>
                            <div class="clearfix"> </div>
                          </div>
                  </div>
                <div class="content-color">
                  <div class="content-ch"><p><i></i>温度 </p><span id="avgT2"></span>
                    <div class="clearfix"> </div>
                  </div>
                  <div class="content-ch1"><p><i></i>湿度</p><span id="avgH2"></span>
                    <div class="clearfix"> </div>
                  </div>
                </div>
                <!--graph-->
                <link rel="stylesheet" href="/static/css/graph.css">
                <!--//graph-->
                <script src="/static/js/jquery.flot.js"></script>
                <script type="text/javascript">
                  var tempData2 = [];
                  var humData2 = [];
                  var avgtempData2 = 0.0;
                  var avghumData2 = 0.0;
                  function poltPint2() {
                      $.ajax({
                           'url':'/ajax_get_temp_hum',
                           'type':'post',
                           'dataType':'json',
                           'data':{'hardId':$('#hardid2').html()}
                       }).success(function (data) {
                            tempData2 = data.tempData;
                            humData2 = data.humData;
                            avgtempData2 = data.avgtempData;
                            avghumData2 = data.avghumData;
                        {#alert(tempData);#}
                        {#alert(humData);#}
                      });
                      $('#avgT2').html(avgtempData2);
                      $('#avgH2').html(avghumData2);
                      var graphData = [{
                       data: tempData2,
                       color: '#999999'
                    }, {
                        data: humData2,
                        color: '#d0cb2e',
                      points: { radius: 2, fillColor: '#7f8c8d' }
                    }
                    ];
                    $.plot($('#graph-lines-2'), graphData, {
                      series: {
                        points: {
                          show: true,
                          radius: 2
                        },
                        lines: {
                          show: true
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000#}
                          tickSize:10
                      }
                    });

                    // Bars Graph ##############################################
                    $.plot($('#graph-bars-2'), graphData, {
                      series: {
                        bars: {
                          show: true,
                          barWidth: .9,
                          align: 'center'
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000  TODO#}
                          tickSize:10
                      }
                    });

                    // Graph Toggle ############################################
                    $('#graph-bars-2').hide();

                    $('#lines').on('click', function (e) {
                      $('#bars').removeClass('active');
                      $('#graph-bars-2').fadeOut();
                      $(this).addClass('active');
                      $('#graph-lines-2').fadeIn();
                      e.preventDefault();
                    });

                    $('#bars').on('click', function (e) {
                      $('#lines').removeClass('active');
                      $('#graph-lines-2').fadeOut();
                      $(this).addClass('active');
                      $('#graph-bars-2').fadeIn().removeClass('hidden');
                      e.preventDefault();
                    });

                    // Tooltip #################################################
                    function showTooltip(x, y, contents) {
                      $('<div id="tooltip">' + contents + '</div>').css({
                        top: y - 16,
                        left: x + 20
                      }).appendTo('body').fadeIn();
                    }

                    var previousPoint = null;

                    $('#graph-lines-2, #graph-bars-2').bind('plothover', function (event, pos, item) {
                      if (item) {
                        if (previousPoint != item.dataIndex) {
                          previousPoint = item.dataIndex;
                          $('#tooltip').remove();
                          var x = item.datapoint[0],
                            y = item.datapoint[1];
                          showTooltip(item.pageX, item.pageY, y );
                        }
                      } else {
                        $('#tooltip').remove();
                        previousPoint = null;
                      }
                    });

                  }
                  $(document).ready(function () {
                      setInterval(poltPint2,2000);
                  });
                </script>
                <div class="graph-container">

                  <div id="graph-lines-2"> </div>
                  <div id="graph-bars-2"> </div>
                </div>

              </div>
            </div>
            <div class="clearfix"> </div>
          </div>
          {# graph 2 end  #}

          {# graph 3start #}
          <div class="content-top">
            <div class="col-md-6 ">
              <div class="content-graph">
                  <div class="content-color-title">
                      <div class="content-ch">
                        <p><i></i>货柜编号:</p>
                        <span>003</span>
                        <div class="clearfix"> </div>
                        </div>
                          <div class="content-ch1">
                              <p><i></i>传感器编号:</p>
                              <span> {{ hardIdList.2 }}</span>
                            <div class="clearfix"> </div>
                          </div>
                  </div>
                <div class="content-color">
                  <div class="content-ch">
                      <p><i></i>温度</p>
                      <span id="avgT3"></span>
                    <div class="clearfix"> </div>
                  </div>
                  <div class="content-ch1">
                      <p><i></i>湿度</p>
                      <span id="avgH3"> </span>
                    <div class="clearfix"> </div>
                  </div>
                </div>
                <!--graph-->
                <link rel="stylesheet" href="/static/css/graph.css">
                <!--//graph-->
                <script src="/static/js/jquery.flot.js"></script>
                <script type="text/javascript">
                  var tempData3 = [];
                  var humData3 = [];
                  var avgtempData3 = 0.0;
                  var avghumData3 = 0.0;
                  function poltPint3() {
                      $.ajax({
                           'url':'/ajax_get_temp_hum',
                           'type':'post',
                           'dataType':'json',
                           'data':{'hardId':$('#hardid3').html()}
                       }).success(function (data) {
                            tempData3 = data.tempData;
                            humData3 = data.humData;
                            avgtempData3 = data.avgtempData;
                            avghumData3 = data.avghumData;
                        {#alert(tempData);#}
                        {#alert(humData);#}
                      });
                      $('#avgT2').html(avgtempData3);
                      $('#avgH2').html(avghumData3);
                      var graphData = [{
                       data: tempData3,
                       color: '#999999'
                    }, {
                        data: humData3,
                        color: '#d0cb2e',
                      points: { radius: 2, fillColor: '#7f8c8d' }
                    }
                    ];
                    $.plot($('#graph-lines-3'), graphData, {
                      series: {
                        points: {
                          show: true,
                          radius: 2
                        },
                        lines: {
                          show: true
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000#}
                          tickSize:10
                      }
                    });

                    // Bars Graph ##############################################
                    $.plot($('#graph-bars-3'), graphData, {
                      series: {
                        bars: {
                          show: true,
                          barWidth: .9,
                          align: 'center'
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000  TODO#}
                          tickSize:10
                      }
                    });

                    // Graph Toggle ############################################
                    $('#graph-bars-3').hide();

                    $('#lines').on('click', function (e) {
                      $('#bars').removeClass('active');
                      $('#graph-bars-3').fadeOut();
                      $(this).addClass('active');
                      $('#graph-lines-3').fadeIn();
                      e.preventDefault();
                    });

                    $('#bars').on('click', function (e) {
                      $('#lines').removeClass('active');
                      $('#graph-lines-3').fadeOut();
                      $(this).addClass('active');
                      $('#graph-bars-3').fadeIn().removeClass('hidden');
                      e.preventDefault();
                    });

                    // Tooltip #################################################
                    function showTooltip(x, y, contents) {
                      $('<div id="tooltip">' + contents + '</div>').css({
                        top: y - 16,
                        left: x + 20
                      }).appendTo('body').fadeIn();
                    }

                    var previousPoint = null;

                    $('#graph-lines-3, #graph-bars-3').bind('plothover', function (event, pos, item) {
                      if (item) {
                        if (previousPoint != item.dataIndex) {
                          previousPoint = item.dataIndex;
                          $('#tooltip').remove();
                          var x = item.datapoint[0],
                            y = item.datapoint[1];
                          showTooltip(item.pageX, item.pageY, y );
                        }
                      } else {
                        $('#tooltip').remove();
                        previousPoint = null;
                      }
                    });

                  }
                  $(document).ready(function () {
                      setInterval(poltPint3,2000);
                  });
                </script>
                <div class="graph-container">

                  <div id="graph-lines-3"> </div>
                  <div id="graph-bars-3"> </div>
                </div>

              </div>
            </div>
              {# graph 4 start  #}
            <div class="col-md-6 content-top-2">
              <div class="content-graph">
                  <div class="content-color-title">
                      <div class="content-ch">
                        <p><i></i>货柜编号:</p>
                        <span>004</span>
                        <div class="clearfix"> </div>
                        </div>
                          <div class="content-ch1">
                              <p><i></i>传感器编号:</p>
                              <span > {{ hardIdList.3 }}</span>
                            <div class="clearfix"> </div>
                          </div>
                  </div>
                <div class="content-color">
                  <div class="content-ch"><p><i></i>温度 </p><span id="avgT4"></span>
                    <div class="clearfix"> </div>
                  </div>
                  <div class="content-ch1"><p><i></i>湿度</p><span id="avgH4"></span>
                    <div class="clearfix"> </div>
                  </div>
                </div>
                <!--graph-->
                <link rel="stylesheet" href="/static/css/graph.css">
                <!--//graph-->
                <script src="/static/js/jquery.flot.js"></script>
                <script type="text/javascript">
                  var tempData4 = [];
                  var humData4 = [];
                  var avgtempData4 = 0.0;
                  var avghumData4 = 0.0;
                  function poltPint4() {
                      $.ajax({
                           'url':'/ajax_get_temp_hum',
                           'type':'post',
                           'dataType':'json',
                           'data':{'hardId':$('#hardid4').html()}
                       }).success(function (data) {
                            tempData4 = data.tempData;
                            humData4 = data.humData;
                            avgtempData4 = data.avgtempData;
                            avghumData4 = data.avghumData;
                      });
                      $('#avgT4').html(avgtempData4);
                      $('#avgH4').html(avghumData4);
                      var graphData = [{
                       data: tempData4,
                       color: '#999999'
                    }, {
                        data: humData4,
                        color: '#d0cb2e',
                      points: { radius: 2, fillColor: '#7f8c8d' }
                    }
                    ];
                    $.plot($('#graph-lines-4'), graphData, {
                      series: {
                        points: {
                          show: true,
                          radius: 2
                        },
                        lines: {
                          show: true
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                          tickSize:10
                      }
                    });
                    // Bars Graph ##############################################
                    $.plot($('#graph-bars-4'), graphData, {
                      series: {
                        bars: {
                          show: true,
                          barWidth: .9,
                          align: 'center'
                        },
                        shadowSize: 0
                      },
                      grid: {
                        color: '#7f8c8d',
                        borderColor: 'transparent',
                        borderWidth: 15,
                        hoverable: true
                      },
                      xaxis: {
                        tickColor: 'transparent',
                        tickDecimals: 0
                      },
                      yaxis: {
                        {#tickSize: 1000  TODO#}
                          tickSize:10
                      }
                    });

                    // Graph Toggle ############################################
                    $('#graph-bars-4').hide();

                    $('#lines').on('click', function (e) {
                      $('#bars').removeClass('active');
                      $('#graph-bars-4').fadeOut();
                      $(this).addClass('active');
                      $('#graph-lines-4').fadeIn();
                      e.preventDefault();
                    });
                    $('#bars').on('click', function (e) {
                      $('#lines').removeClass('active');
                      $('#graph-lines-4').fadeOut();
                      $(this).addClass('active');
                      $('#graph-bars-4').fadeIn().removeClass('hidden');
                      e.preventDefault();
                    });
                    // Tooltip #################################################
                    function showTooltip(x, y, contents) {
                      $('<div id="tooltip">' + contents + '</div>').css({
                        top: y - 16,
                        left: x + 20
                      }).appendTo('body').fadeIn();
                    }
                    var previousPoint = null;
                    $('#graph-lines-4, #graph-bars-4').bind('plothover', function (event, pos, item) {
                      if (item) {
                        if (previousPoint != item.dataIndex) {
                          previousPoint = item.dataIndex;
                          $('#tooltip').remove();
                          var x = item.datapoint[0],
                            y = item.datapoint[1];
                          showTooltip(item.pageX, item.pageY, y );
                        }
                      } else {
                        $('#tooltip').remove();
                        previousPoint = null;
                      }
                    });
                  }
                  $(document).ready(function () {
                      setInterval(poltPint4,2000);
                  });
                </script>
                <div class="graph-container">

                  <div id="graph-lines-4"> </div>
                  <div id="graph-bars-4"> </div>
                </div>
              </div>
            </div>
          </div>
          <!---->
          <div class="clearfix"> </div>
            </div>
        <div id="point2"></div>
        <div class="content-mid content-top">
            <div class="banner">

                    <h2>
                      <a href="#point1">首页</a>
                      <i class="fa fa-angle-right"></i>
                      <span>检疫和信息</span>
                    </h2>
                  </div>
        </div>
          <div class="content-main">


               <div class="content-mid">
               <div class="grid_3 grid_5">
     <h3 class="head-top">商品详细</h3>
       <div class="but_list">
	    <div class="col-md-12 page_1">
			<p>这里显示的是车厢内商品的详细信息，排序依照危险程度</p>
            <div id="pages" class="text-right" >
                <nav>
                <ul class="pagination">
                    <li class="step-links">
                    <button id="perpage">上一页</button>
                <label class="current">
                    Page <em id="curId"></em> of <em id="toId">1</em> </label>
                    <button id="nextpage">下一页</button>
                    </li>
                </ul>
                </nav>
             </div>
             <style type="text/css">
                .badge{
                    color:#555;
                    background-color: #f5f5f5;
                }
            </style>
            <script type="text/javascript">
                    var $superId = $("#superId").html();
                    function initList() {
                        $.ajax({
                               'url':'/ajax_super_inint_list',
                               'type':'post',
                               'dataType':'json',
                               'data':{'superNum' : $superId}
                           }).success(function (data) {
                               $("#curId").html(1);
                                if(data.goodsCount >10){
                                    var loopCount = 10;
                                    if(data.goodsCount % 10 == 0)
                                        $("#toId").html(data.goodsCount /10 )
                                    else
                                        $("#toId").html(Math.floor(data.goodsCount / 10 + 1));
                                }
                                else {
                                    loopCount = data.goodsCount;
                                }
                                for(i = 0;i < loopCount;i++){
                                   $("#insertPoint").append(('<tr>' +
                                   '<td id="l1">' + (i+1) + '</td>' +
                                   '<td><span class="badge" id="l2">' + data.json_data[i].fields.proName + '</span></td>' +
                                   '<td><span class="badge" id="l3">' + data.json_data[i].fields.proCode + '</span></td>' +
                                   '<td><span class="badge" id="l4">' + data.json_data[i].fields.evaluate + '</span></td>' +
                                   '<td><span class="badge" id="l5">' + data.json_data[i].fields.expDate + '</span></td>' +
                                   '<td><span class="badge" id="l6">' + data.json_data[i].fields.manDate + '</span></td>' +
                                   '<td><span class="badge" id="l7">' + data.json_data[i].fields.examiner + '</span></td>' +
                                   '<td><span class="badge" id="l8">' + data.json_data[i].fields.manEnterprise + '</span></td>' +
                                   '<td><span class="badge" id="l9">' + data.json_data[i].fields.supererSnesor + '</span></td>' +
                                   '<td><span class="badge" id="l10">' + data.json_data[i].fields.opAdvies + '</span></td>' +
                                       '</tr>'));
                                }
                          });
                    }
                    function perPage() {
                        var curId = parseInt($("#curId").html());
                        var toId = parseInt($("#toId").html());
                        if (curId <= 1){
                            return false;
                        }else{
                            curId = curId -1 ;
                            $("#curId").html(curId);
                              $.ajax({
                               'url':'/ajax_super_inint_list',
                               'type':'post',
                               'dataType':'json',
                               'data':{'superNum' : $superId}
                           }).success(function (data) {
                                var initI = (curId-1)*10;
                                var termI = initI+10;
                                $("#l1").parent().parent().children().remove();
                                for(i = initI;i < termI;i++){
                                    $("#insertPoint").append(('<tr>' +
                                   '<td id="l1">' + (i+1) + '</td>' +
                                   '<td><span class="badge" id="l2">' + data.json_data[i].fields.proName + '</span></td>' +
                                   '<td><span class="badge" id="l3">' + data.json_data[i].fields.proCode + '</span></td>' +
                                   '<td><span class="badge" id="l4">' + data.json_data[i].fields.evaluate + '</span></td>' +
                                   '<td><span class="badge" id="l5">' + data.json_data[i].fields.expDate + '</span></td>' +
                                   '<td><span class="badge" id="l6">' + data.json_data[i].fields.manDate + '</span></td>' +
                                   '<td><span class="badge" id="l7">' + data.json_data[i].fields.examiner + '</span></td>' +
                                   '<td><span class="badge" id="l8">' + data.json_data[i].fields.manEnterprise + '</span></td>' +
                                   '<td><span class="badge" id="l9">' + data.json_data[i].fields.supererSnesor + '</span></td>' +
                                   '<td><span class="badge" id="l10">' + data.json_data[i].fields.opAdvies + '</span></td>' +
                                        '</tr>'));
                                }
                          });
                            return false;
                        }
                    }
                    function nextPage() {
                        var curId = parseInt($("#curId").html());
                        var toId = parseInt($("#toId").html());

                        if(curId>=toId){
                            return false;
                        }
                        else{
                            curId = curId +1 ;
                            $("#curId").html(curId);
                            $.ajax({
                               'url':'/ajax_super_inint_list',
                               'type':'post',
                               'dataType':'json',
                               'data':{'superNum' : $superId}
                           }).success(function (data) {
                                var initI = (curId-1)*10;
                                var termI = 0;
                                if(toId == curId){
                                    termI = data.goodsCount;
                                }else{
                                    termI = initI+10;
                                }
                                $("#l1").parent().parent().children().remove();
                                for(i = initI;i < termI;i++){
                                    $("#insertPoint").append(('<tr>' +
                                   '<td id="l1">' + (i+1) + '</td>' +
                                   '<td><span class="badge" id="l2">' + data.json_data[i].fields.proName + '</span></td>' +
                                   '<td><span class="badge" id="l3">' + data.json_data[i].fields.proCode + '</span></td>' +
                                   '<td><span class="badge" id="l4">' + data.json_data[i].fields.evaluate + '</span></td>' +
                                   '<td><span class="badge" id="l5">' + data.json_data[i].fields.expDate + '</span></td>' +
                                   '<td><span class="badge" id="l6">' + data.json_data[i].fields.manDate + '</span></td>' +
                                   '<td><span class="badge" id="l7">' + data.json_data[i].fields.examiner + '</span></td>' +
                                   '<td><span class="badge" id="l8">' + data.json_data[i].fields.manEnterprise + '</span></td>' +
                                   '<td><span class="badge" id="l9">' + data.json_data[i].fields.supererSnesor + '</span></td>' +
                                   '<td><span class="badge" id="l10">' + data.json_data[i].fields.opAdvies + '</span></td>' +
                                   '</tr>'));
                                }
                          });
                            return false;
                        }
                    }
                    function changeColor() {
                        var $lable = $('#l4');

                        var $evaluate = parseInt($lable.html());
                        if ($evaluate<= 3){
                            $lable.css('color','#ef0d0d');
                        }else if($evaluate<7){
                            $lable.css('color','#efbb1a');
                        }
                    }
                    $(document).ready(function () {
                        initList();
                        $('#perpage').bind('click', function (e) {
                            e.preventDefault();
                            e.stopPropagation();
                            perPage();
                            changeColor();
                        });
                      $('#nextpage').bind('click', function (e) {
                                e.preventDefault();
                                e.stopPropagation();
                                nextPage();
                                changeColor();

                      });


                  });
                </script>
              <table class="table table-bordered">
				<thead class="list">
					<tr>
						<th >序号</th>
						<th >商品名称</th>
                        <th >商品编号</th>
						<th >安全评估</th>
                        <th >保质期</th>
                        <th >生产日期</th>
                        <th >检验人</th>
                        <th >生产厂商</th>
                        <th >传感器编号</th>
                        <th >操作建议</th>

					</tr>
				</thead>
				<tbody id="insertPoint">
				</tbody>
			  </table>
		</div>
	   <div class="clearfix"> </div>
	   </div>
     </div>
            </div>



            <div class="col-md-5">

              <div class="cal1 cal_2"><div class="clndr"><div class="clndr-controls"><div class="clndr-control-button"><p class="clndr-previous-button">previous</p></div><div class="month">July 2015</div><div class="clndr-control-button rightalign"><p class="clndr-next-button">next</p></div></div><table class="clndr-table" border="0" cellspacing="0" cellpadding="0"><thead><tr class="header-days"><td class="header-day">S</td><td class="header-day">M</td><td class="header-day">T</td><td class="header-day">W</td><td class="header-day">T</td><td class="header-day">F</td><td class="header-day">S</td></tr></thead><tbody><tr><td class="day adjacent-month last-month calendar-day-2015-06-28"><div class="day-contents">28</div></td><td class="day adjacent-month last-month calendar-day-2015-06-29"><div class="day-contents">29</div></td><td class="day adjacent-month last-month calendar-day-2015-06-30"><div class="day-contents">30</div></td><td class="day calendar-day-2015-07-01"><div class="day-contents">1</div></td><td class="day calendar-day-2015-07-02"><div class="day-contents">2</div></td><td class="day calendar-day-2015-07-03"><div class="day-contents">3</div></td><td class="day calendar-day-2015-07-04"><div class="day-contents">4</div></td></tr><tr><td class="day calendar-day-2015-07-05"><div class="day-contents">5</div></td><td class="day calendar-day-2015-07-06"><div class="day-contents">6</div></td><td class="day calendar-day-2015-07-07"><div class="day-contents">7</div></td><td class="day calendar-day-2015-07-08"><div class="day-contents">8</div></td><td class="day calendar-day-2015-07-09"><div class="day-contents">9</div></td><td class="day calendar-day-2015-07-10"><div class="day-contents">10</div></td><td class="day calendar-day-2015-07-11"><div class="day-contents">11</div></td></tr><tr><td class="day calendar-day-2015-07-12"><div class="day-contents">12</div></td><td class="day calendar-day-2015-07-13"><div class="day-contents">13</div></td><td class="day calendar-day-2015-07-14"><div class="day-contents">14</div></td><td class="day calendar-day-2015-07-15"><div class="day-contents">15</div></td><td class="day calendar-day-2015-07-16"><div class="day-contents">16</div></td><td class="day calendar-day-2015-07-17"><div class="day-contents">17</div></td><td class="day calendar-day-2015-07-18"><div class="day-contents">18</div></td></tr><tr><td class="day calendar-day-2015-07-19"><div class="day-contents">19</div></td><td class="day calendar-day-2015-07-20"><div class="day-contents">20</div></td><td class="day calendar-day-2015-07-21"><div class="day-contents">21</div></td><td class="day calendar-day-2015-07-22"><div class="day-contents">22</div></td><td class="day calendar-day-2015-07-23"><div class="day-contents">23</div></td><td class="day calendar-day-2015-07-24"><div class="day-contents">24</div></td><td class="day calendar-day-2015-07-25"><div class="day-contents">25</div></td></tr><tr><td class="day calendar-day-2015-07-26"><div class="day-contents">26</div></td><td class="day calendar-day-2015-07-27"><div class="day-contents">27</div></td><td class="day calendar-day-2015-07-28"><div class="day-contents">28</div></td><td class="day calendar-day-2015-07-29"><div class="day-contents">29</div></td><td class="day calendar-day-2015-07-30"><div class="day-contents">30</div></td><td class="day calendar-day-2015-07-31"><div class="day-contents">31</div></td><td class="day adjacent-month next-month calendar-day-2015-08-01"><div class="day-contents">1</div></td></tr></tbody></table></div></div>
              <!----Calender -------->
              <link rel="stylesheet" href="/static/css/clndr.css" type="text/css" />
              <script src="/static/js/underscore-min.js" type="text/javascript"></script>
              <script src= "/static/js/moment-2.2.1.js" type="text/javascript"></script>
              <script src="/static/js/clndr.js" type="text/javascript"></script>
              <script src="/static/js/site.js" type="text/javascript"></script>
              <!----End Calender -------->
            </div>
            <div class="col-md-7 mid-content-top">
              <div class="middle-content">
                <h3>检疫检验证书</h3>
                <!-- start content_slider -->
                <div id="owl-demo" class="owl-carousel text-center">
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg1.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg2.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg3.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg4.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg5.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg6.jpg" alt="name">
                  </div>
                  <div class="item">
                    <img class="lazyOwl img-responsive" data-src="/static/media/messageDisplay/timg7.jpg" alt="name">
                  </div>

                </div>
              </div>
              <!--//sreen-gallery-cursual---->
              <!-- requried-jsfiles-for owl -->
              <link href="/static/css/owl.carousel.css" rel="stylesheet">
              <script src="/static/js/owl.carousel.js"></script>
              <script>
                $(document).ready(function() {
          $("#owl-demo").owlCarousel({
            items : 3,
            lazyLoad : true,
            autoPlay : true,
            pagination : true,
            nav:true,
          });
        });
              </script>
              <!-- //requried-jsfiles-for owl -->
            </div>




              <div class="content-mid">

              </div>

            <div class="clearfix"> </div>
          </div>
          <!----->
            <div id="point3"></div>
            <div class="content-main">
    <div class="banner">

            <h2>
              <a href="#point1">首页</a>
              <i class="fa fa-angle-right"></i>
              <span>投诉建议</span>
            </h2>
          </div>
    </div>
{# -----------------------3 parts #}
          <div class="content-bottom">
            <div class="col-md-12 post-top">
 	<div class="validation-system">

 		<div class="validation-form">
 	<!---->

        <form>
         	<div class="vali-form">
            <div class="col-md-4 form-group1">
              <label class="control-label">姓名</label>
              <input type="text" placeholder="请输入真实的姓名" required="">
            </div>
            <div class="col-md-4 form-group1 form-last">
              <label class="control-label">电话</label>
              <input type="text" placeholder="请输入合法的电话号码" required="">
            </div>
            <div class="col-md-4 form-group1 group-mail">
              <label class="control-label">邮箱</label>
              <input type="text" placeholder="如果有邮箱，那么请输入" required="">
            </div>
            </div>

            <div class="col-md-6 form-group1 group-mail">
              <label class="control-label">身份证号</label>
              <input type="text" placeholder="填写本人的身份证号，我们将进行实名验证" required="">
            </div>
            <div class="col-md-6 form-group1 group-mail">
              <label class="control-label ">提交日期</label>
              <input type="date" class="form-control1 ng-invalid ng-invalid-required" ng-model="model.date" required="">
            </div>
            <div class="col-md-12 form-group1 ">
              <label class="control-label">投诉内容</label>
              <textarea  placeholder="请输入你的投诉描述" required="">Your Comment.....</textarea>
            </div>
             <div class="clearfix"> </div>
            <div class="col-md-12 form-group">
              <button type="submit" class="btn btn-primary">提交</button>
              <button type="reset" class="btn consumers.html">重置</button>
            </div>
          <div class="clearfix"> </div>
        </form>

 	<!---->
 </div>

</div>

            </div>
            <div class="col-md-12">
              <div class="weather">
                <div class="weather-top">
                  <div class="weather-top-left">
                    <div class="degree">
                      <figure class="icons">
                        <canvas id="partly-cloudy-day" width="64" height="64">
                        </canvas>
                      </figure>
                      <span>37°</span>
                      <div class="clearfix"></div>
                    </div>
                      <script>
                      var icons = new Skycons({"color": "#1ABC9C"}),
  list  = [
    "clear-night", "partly-cloudy-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                    </script>
                    <p>FRIDAY
                    <label>13</label>
                    <sup>th</sup>
                    AUG
                    </p>
                  </div>
                  <div class="weather-top-right">
                    <p><i class="fa fa-map-marker"></i>lorem ipsum</p>
                    <label>lorem ipsum</label>
                  </div>
                  <div class="clearfix"> </div>
                </div>
                <div class="weather-bottom">
                  <div class="weather-bottom1">
                    <div class="weather-head">
                      <h4>Cloudy</h4>
                      <figure class="icons">
                        <canvas id="cloudy" width="58" height="58"></canvas>
                      </figure>					
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "cloudy",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>
                      <h6>20°</h6>
                      <div class="bottom-head">
                        <p>August 16</p>
                        <p>Monday</p>
                      </div>
                    </div>
                  </div>
                  <div class="weather-bottom1 ">
                    <div class="weather-head">
                      <h4>Sunny</h4>
                      <figure class="icons">
                        <canvas id="clear-day" width="58" height="58">
                        </canvas>				
                      </figure>					
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "clear-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>
                      <h6>37°</h6>
                      <div class="bottom-head">
                        <p>August 17</p>
                        <p>Tuesday</p>
                      </div>
                    </div>
                  </div>
                  <div class="weather-bottom1">
                    <div class="weather-head">
                      <h4>Rainy</h4>
                      <figure class="icons">
                        <canvas id="sleet" width="58" height="58">
                        </canvas>
                      </figure>
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "clear-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>

                      <h6>7°</h6>
                      <div class="bottom-head">
                        <p>August 18</p>
                        <p>Wednesday</p>
                      </div>
                    </div>
                  </div>
                  <div class="weather-bottom1 ">
                    <div class="weather-head">
                      <h4>Snowy</h4>
                      <figure class="icons">
                        <canvas id="snow" width="58" height="58">
                        </canvas>
                      </figure>
                      <script>
                        var icons = new Skycons({"color": "#999"}),
  list  = [
    "clear-night", "clear-day",
    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
    "fog"
  ],
  i;

for(i = list.length; i--; )
  icons.set(list[i], list[i]);

icons.play();
                      </script>
                      <h6>-10°</h6>
                      <div class="bottom-head">
                        <p>August 16</p>
                        <p>Thursday</p>
                      </div>
                    </div>
                  </div>
                  <div class="clearfix"> </div>
                </div>

              </div>
            </div>
            <div class="clearfix"> </div>
          </div>

            <div id="point4"></div>
          <div class="content-main">




 	<!--banner-->

		     <div class="banner">

            <h2>
              <a href="#point1">首页</a>
              <i class="fa fa-angle-right"></i>
              <span>投诉处理</span>
            </h2>
          </div>

		<!--//banner-->
 	<!--grid-->
 	 <div class="inbox-mail">
	<div class="col-md-4 compose"> {# TODO1 #}
		<form action="#" method="GET">
                <div class="input-group input-group-in">
                    <input type="text" name="search" class="form-control2 input-search" placeholder="Search...">
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="button"><i class="fa fa-search"></i></button>
                    </span>
                </div><!-- Input Group -->
            </form>
            <h2>处理项目</h2>
    <nav class="nav-sidebar">
		<ul class="nav tabs" >
          <li class="active"><a href="#tab1" data-toggle="tab"><i class="fa fa-inbox"></i>未处理的投诉 <span>{{ advise.dealcount }}</span><div class="clearfix"></div></a></li>
          <li class=""><a href="#tab2" data-toggle="tab"><i class="fa fa-paper-plane-o"></i>处理中的投诉<span>{{ advise.dealingcount }}</span></a></li>
          <li class=""><a href="#tab3" data-toggle="tab"><i class="fa fa-star-o"></i>处理完成的投诉<span>{{ advise.finishcount }}</span></a></li>
          <li class=""><a href="#tab4" data-toggle="tab"><i class="fa fa-pencil-square-o"></i>驳回的投诉 <span>{{ advise.returnAcount }}</span><div class="clearfix"></div></a></li>
          <li class=""><a href="#tab5" data-toggle="tab"><i class="fa fa-trash-o"></i>删除的投诉<span>{{ advise.deleteAcount }}</span></a></li>
		</ul>
	</nav>

        <div class="clearfix"></div>
</div>
<!-- tab content -->
<div class="col-md-8 tab-content tab-content-in">
<div class="tab-pane active text-style" id="tab1">
  <div class="inbox-right">

            <div class="mailbox-content">
               <div class="mail-toolbar clearfix">
			    <div class="float-right">
<div class="dropdown">
			            <a href="#" title="" class="btn btn-default" data-toggle="dropdown" aria-expanded="false">
			                <i class="fa fa-cog icon_8"></i>
			                <i class="fa fa-chevron-down icon_8"></i>
			            <div class="ripple-wrapper"></div></a>
			            <ul class="dropdown-menu float-right">
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-pencil-square-o icon_9"></i>
			                        Edit
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-calendar icon_9"></i>
			                        Schedule
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-download icon_9"></i>
			                        Download
			                    </a>
			                </li>

			                <li>
			                    <a href="#" class="font-red" title="">
			                        <i class="fa fa-times" icon_9=""></i>
			                        Delete
			                    </a>
			                </li>
			            </ul>
			        </div>
                    <div class="btn-group">
                        <a class="btn btn-default"><i class="fa fa-angle-left"></i></a>
                        <a class="btn btn-default"><i class="fa fa-angle-right"></i></a>
                    </div>
			    </div>
               </div>
                <table class="table">
                    <tbody>
                    <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                                <h6>商品名</h6>
                         <p>投诉内容</p>
                            </td>
                            <td>
                            	<span class="fam">查看详细</span>
                            </td>
                            <td class="march">
                               投诉时间
                            </td>

                             <td >
							 <i class="fa fa-star-half-o icon-state-warning">操作</i>

                            </td>
                        </tr>
                    {% for i  in  advise.dealing %}
                        <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                            	<h6>{{i.adDoods}} </h6>
                                <p>{{ i.adConsumerText }}</p>
                            </td>
                            <td><button class="detail">查看详细</button></td>
                            <td class="march">
                                {{ i.adDate }}
                            </td>
                            <td style="color:#3BB2D0" >
                                 <button class="deal">处理</button>
                                 <button class="advise">上诉</button>
                            </td>
                            <td class="adShow"><div class="advise_display" id="{{ forloop }}">
                                <ul>
                                    <li><em>投诉人名字->:</em><em>{{ i.adName }}</em></li>
                                    <li><em>投诉商品->:</em><em>{{ i.adDoods }}</em></li>
                                    <li><em>投诉人电话->:</em><em>{{ i.adTel }}</em></li>
                                    <li><em>投诉人邮件->:</em><em>{{ i.adMail }}</em></li>
                                    <li><em>投诉人身份证->:</em><em>{{ i.adIdCard }}</em></li>
                                    <li><em>投诉日期->:</em><em>{{ i.adDate }}</em></li>
                                    <li><em>投诉内容->:</em>{{ i.adConsumerText }}<em></em></li>
                                    <li><button >关闭</button></li>
                                </ul>
                            </div>
                            </td>
                        </tr>
                        <script type="text/javascript">
                            $(function(){
                                $(".adShow").hide();
                                $(".advise_display ul li button").click(function () {
                                    $(this).parent().parent().parent().parent().fadeOut();
                                });
                                $(".detail").click(function(){
                                    $(this).parent().parent().children().last().fadeIn();
                                });
                            });
                        </script>
                    {% endfor %}

                    </tbody>
                </table>
               </div>
            </div>
</div>
<div class="tab-pane  text-style" id="tab2">
  <div class="inbox-right">

            <div class="mailbox-content">
               <div class="mail-toolbar clearfix">
			    <div class="float-right">
<div class="dropdown">
			            <a href="#" title="" class="btn btn-default" data-toggle="dropdown" aria-expanded="false">
			                <i class="fa fa-cog icon_8"></i>
			                <i class="fa fa-chevron-down icon_8"></i>
			            <div class="ripple-wrapper"></div></a>
			            <ul class="dropdown-menu float-right">
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-pencil-square-o icon_9"></i>
			                        Edit
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-calendar icon_9"></i>
			                        Schedule
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-download icon_9"></i>
			                        Download
			                    </a>
			                </li>

			                <li>
			                    <a href="#" class="font-red" title="">
			                        <i class="fa fa-times" icon_9=""></i>
			                        Delete
			                    </a>
			                </li>
			            </ul>
			        </div>

                            <div class="btn-group">
                                <a class="btn btn-default"><i class="fa fa-angle-left"></i></a>
                                <a class="btn btn-default"><i class="fa fa-angle-right"></i></a>
                            </div>


			    </div>

               </div>
                <table class="table">
                    <tbody>
                    <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                                <h6>商品名</h6>
                         <p>投诉内容</p>
                            </td>
                            <td>
                            	<span class="fam">查看详细</span>
                            </td>
                            <td class="march">
                               投诉时间
                            </td>

                             <td >
							 <i class="fa fa-star-half-o icon-state-warning">操作</i>

                            </td>
                        </tr>
                    {% for i  in  advise.deal %}
                        <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                            	<h6>{{i.adDoods}} </h6>
                                <p>{{ i.adConsumerText }}</p>
                            </td>
                            <td><button class="detail">查看详细</button></td>
                            <td class="march">
                                {{ i.adDate }}
                            </td>
                            <td style="color:#3BB2D0" >
                                 <button class="deal">处理</button>
                                 <button class="advise">上诉</button>
                            </td>
                            <td class="adShow">
                                <div class="advise_display" id="{{ forloop }}">
                                    <ul>
                                        <li><em>投诉人名字->:</em><em>{{ i.adName }}</em></li>
                                        <li><em>投诉商品->:</em><em>{{ i.adDoods }}</em></li>
                                        <li><em>投诉人电话->:</em><em>{{ i.adTel }}</em></li>
                                        <li><em>投诉人邮件->:</em><em>{{ i.adMail }}</em></li>
                                        <li><em>投诉人身份证->:</em><em>{{ i.adIdCard }}</em></li>
                                        <li><em>投诉日期->:</em><em>{{ i.adDate }}</em></li>
                                        <li><em>投诉内容->:</em>{{ i.adConsumerText }}<em></em></li>
                                        <li><button >关闭</button></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <script type="text/javascript">
                            $(function(){
                                $(".adShow").hide();
                                $(".advise_display ul li button").click(function () {
                                    $(this).parent().parent().parent().parent().fadeOut();
                                });
                                $(".detail").click(function(){
                                    $(this).parent().parent().children().last().fadeIn();
                                });
                            });
                        </script>
                    {% endfor %}

                    </tbody>
                </table>
               </div>
            </div>
</div>
<div class="tab-pane  text-style" id="tab3">
  <div class="inbox-right">
            <div class="mailbox-content">
               <div class="mail-toolbar clearfix">
			    <div class="float-right">
<div class="dropdown">
			            <a href="#" title="" class="btn btn-default" data-toggle="dropdown" aria-expanded="false">
			                <i class="fa fa-cog icon_8"></i>
			                <i class="fa fa-chevron-down icon_8"></i>
			            <div class="ripple-wrapper"></div></a>
			            <ul class="dropdown-menu float-right">
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-pencil-square-o icon_9"></i>
			                        Edit
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-calendar icon_9"></i>
			                        Schedule
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-download icon_9"></i>
			                        Download
			                    </a>
			                </li>

			                <li>
			                    <a href="#" class="font-red" title="">
			                        <i class="fa fa-times" icon_9=""></i>
			                        Delete
			                    </a>
			                </li>
			            </ul>
			        </div>

                            <div class="btn-group">
                                <a class="btn btn-default"><i class="fa fa-angle-left"></i></a>
                                <a class="btn btn-default"><i class="fa fa-angle-right"></i></a>
                            </div>


			    </div>
               </div>
                <table class="table">
                    <tbody>
                    <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                                <h6>商品名</h6>
                         <p>投诉内容</p>
                            </td>
                            <td>
                            	<span class="fam">查看详细</span>
                            </td>
                            <td class="march">
                               投诉时间
                            </td>

                             <td >
							 <i class="fa fa-star-half-o icon-state-warning">操作</i>

                            </td>
                        </tr>
                    {% for i  in  advise.finish %}
                        <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                            	<h6>{{i.adDoods}} </h6>
                                <p>{{ i.adConsumerText }}</p>
                            </td>
                            <td><button class="detail">查看详细</button></td>
                            <td class="march">
                                {{ i.adDate }}
                            </td>
                            <td style="color:#3BB2D0" >
                                 <button class="deal">处理</button>
                                 <button class="advise">上诉</button>
                            </td>
                            <td class="adShow"><div class="advise_display" id="{{ forloop }}">
                                <ul>
                                    <li><em>投诉人名字->:</em><em>{{ i.adName }}</em></li>
                                    <li><em>投诉商品->:</em><em>{{ i.adDoods }}</em></li>
                                    <li><em>投诉人电话->:</em><em>{{ i.adTel }}</em></li>
                                    <li><em>投诉人邮件->:</em><em>{{ i.adMail }}</em></li>
                                    <li><em>投诉人身份证->:</em><em>{{ i.adIdCard }}</em></li>
                                    <li><em>投诉日期->:</em><em>{{ i.adDate }}</em></li>
                                    <li><em>投诉内容->:</em>{{ i.adConsumerText }}<em></em></li>
                                    <li><button >关闭</button></li>
                                </ul>
                            </div>
                            </td>
                        </tr>
                        <script type="text/javascript">
                            $(function(){
                                $(".adShow").hide();
                                $(".advise_display ul li button").click(function () {
                                    $(this).parent().parent().parent().parent().fadeOut();
                                });
                                $(".detail").click(function(){
                                    $(this).parent().parent().children().last().fadeIn();
                                });
                            });
                        </script>
                    {% endfor %}

                    </tbody>
                </table>
               </div>
            </div>
</div>
<div class="tab-pane  text-style" id="tab4">
  <div class="inbox-right">

            <div class="mailbox-content">
               <div class="mail-toolbar clearfix">
			    <div class="float-right">
<div class="dropdown">
			            <a href="#" title="" class="btn btn-default" data-toggle="dropdown" aria-expanded="false">
			                <i class="fa fa-cog icon_8"></i>
			                <i class="fa fa-chevron-down icon_8"></i>
			            <div class="ripple-wrapper"></div></a>
			            <ul class="dropdown-menu float-right">
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-pencil-square-o icon_9"></i>
			                        Edit
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-calendar icon_9"></i>
			                        Schedule
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-download icon_9"></i>
			                        Download
			                    </a>
			                </li>

			                <li>
			                    <a href="#" class="font-red" title="">
			                        <i class="fa fa-times" icon_9=""></i>
			                        Delete
			                    </a>
			                </li>
			            </ul>
			        </div>

                            <div class="btn-group">
                                <a class="btn btn-default"><i class="fa fa-angle-left"></i></a>
                                <a class="btn btn-default"><i class="fa fa-angle-right"></i></a>
                            </div>


			    </div>

               </div>
                <table class="table">
                    <tbody>
                    <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                                <h6>商品名</h6>
                         <p>投诉内容</p>
                            </td>
                            <td>
                            	<span class="fam">查看详细</span>
                            </td>
                            <td class="march">
                               投诉时间
                            </td>

                             <td >
							 <i class="fa fa-star-half-o icon-state-warning">操作</i>

                            </td>
                        </tr>
                    {% for i  in  advise.returnA %}
                        <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                            	<h6>{{i.adDoods}} </h6>
                                <p>{{ i.adConsumerText }}</p>
                            </td>
                            <td><button class="detail">查看详细</button></td>
                            <td class="march">
                                {{ i.adDate }}
                            </td>
                            <td style="color:#3BB2D0" >
                                 <button class="deal">处理</button>
                                 <button class="advise">上诉</button>
                            </td>
                            <td class="adShow"><div class="advise_display" id="{{ forloop }}">
                                <ul>
                                    <li><em>投诉人名字->:</em><em>{{ i.adName }}</em></li>
                                    <li><em>投诉商品->:</em><em>{{ i.adDoods }}</em></li>
                                    <li><em>投诉人电话->:</em><em>{{ i.adTel }}</em></li>
                                    <li><em>投诉人邮件->:</em><em>{{ i.adMail }}</em></li>
                                    <li><em>投诉人身份证->:</em><em>{{ i.adIdCard }}</em></li>
                                    <li><em>投诉日期->:</em><em>{{ i.adDate }}</em></li>
                                    <li><em>投诉内容->:</em>{{ i.adConsumerText }}<em></em></li>
                                    <li><button >关闭</button></li>
                                </ul>
                            </div>
                            </td>
                        </tr>
                        <script type="text/javascript">
                            $(function(){
                                $(".adShow").hide();
                                $(".advise_display ul li button").click(function () {
                                    $(this).parent().parent().parent().parent().fadeOut();
                                });
                                $(".detail").click(function(){
                                    $(this).parent().parent().children().last().fadeIn();
                                });
                            });
                        </script>
                    {% endfor %}

                    </tbody>
                </table>
               </div>
            </div>
</div>
<div class="tab-pane  text-style" id="tab5">
  <div class="inbox-right">

            <div class="mailbox-content">
               <div class="mail-toolbar clearfix">
			    <div class="float-right">
<div class="dropdown">
			            <a href="#" title="" class="btn btn-default" data-toggle="dropdown" aria-expanded="false">
			                <i class="fa fa-cog icon_8"></i>
			                <i class="fa fa-chevron-down icon_8"></i>
			            <div class="ripple-wrapper"></div></a>
			            <ul class="dropdown-menu float-right">
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-pencil-square-o icon_9"></i>
			                        Edit
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-calendar icon_9"></i>
			                        Schedule
			                    </a>
			                </li>
			                <li>
			                    <a href="#" title="">
			                        <i class="fa fa-download icon_9"></i>
			                        Download
			                    </a>
			                </li>

			                <li>
			                    <a href="#" class="font-red" title="">
			                        <i class="fa fa-times" icon_9=""></i>
			                        Delete
			                    </a>
			                </li>
			            </ul>
			        </div>

                            <div class="btn-group">
                                <a class="btn btn-default"><i class="fa fa-angle-left"></i></a>
                                <a class="btn btn-default"><i class="fa fa-angle-right"></i></a>
                            </div>


			    </div>

               </div>
                <table class="table">
                    <tbody>
                    <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                                <h6>商品名</h6>
                         <p>投诉内容</p>
                            </td>
                            <td>
                            	<span class="fam">查看详细</span>
                            </td>
                            <td class="march">
                               投诉时间
                            </td>

                             <td >
							 <i class="fa fa-star-half-o icon-state-warning">操作</i>

                            </td>
                        </tr>
                    {% for i  in  advise.deleteA %}
                        <tr class="table-row">
                            <td class="table-img">
                               <i class="fa-5x"></i>
                            </td>
                            <td class="table-text">
                            	<h6>{{i.adDoods}} </h6>
                                <p>{{ i.adConsumerText }}</p>
                            </td>
                            <td><button class="detail">查看详细</button></td>
                            <td class="march">
                                {{ i.adDate }}
                            </td>
                            <td style="color:#3BB2D0" >
                                 <button class="deal">处理</button>
                                 <button class="advise">上诉</button>
                            </td>
                            <td class="adShow" style="margin: 0"><div class="advise_display" id="{{ forloop }}">
                                <ul>
                                    <li><em>投诉人名字->:</em><em>{{ i.adName }}</em></li>
                                    <li><em>投诉商品->:</em><em>{{ i.adDoods }}</em></li>
                                    <li><em>投诉人电话->:</em><em>{{ i.adTel }}</em></li>
                                    <li><em>投诉人邮件->:</em><em>{{ i.adMail }}</em></li>
                                    <li><em>投诉人身份证->:</em><em>{{ i.adIdCard }}</em></li>
                                    <li><em>投诉日期->:</em><em>{{ i.adDate }}</em></li>
                                    <li><em>投诉内容->:</em>{{ i.adConsumerText }}<em></em></li>
                                    <li><button >关闭</button></li>
                                </ul>
                            </div>
                            </td>
                        </tr>
                        <script type="text/javascript">
                            $(function(){
                                $(".adShow").hide();
                                $(".advise_display ul li button").click(function () {
                                    $(this).parent().parent().parent().parent().fadeOut();
                                });
                                $(".detail").click(function(){
                                    $(this).parent().parent().children().last().fadeIn();
                                });
                            });
                        </script>
                    {% endfor %}

                    </tbody>
                </table>
               </div>
            </div>
</div>

</div>
<div class="clearfix"> </div>
   </div>
</div>
          <div class="copy">
            <p> &copy; 2020 冷链物流监控系统. All Rights Reserved | Design by <a href="signin.html" target="_blank">Logistic</a> </p>
          </div>
        </div>
        <div class="clearfix"> </div>
      </div>
        </div>
        <!---->
        <!--scrolling js-->
        <script src="/static/js/jquery.nicescroll.js"></script>
        <script src="/static/js/scripts.js"></script>
        <!--//scrolling js-->
        <script src="/static/js/bootstrap.min.js"> </script>
  </body>
</html>

